<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/icons-extra.css" />
	</head>

	<body>
		<style>
			.mui-input-row {
				height: 40px !important;
			}
		</style>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">购物车</h1>
	<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="checkAll">全选</button>
	<a class="mui-icon  mui-icon-trash  mui-pull-right" id="deleteAll"></a>

</header>
		<footer>
			<div class="mui-row">
				<a class="footer-item mui-col-xs-4" href="#tabbar"
					style="background-color: #FAFAFA; color: #999999; padding: 8px 4px;">
					<span>金额<br> <font color="#FF0000" size="4">￥<span
							id="total">0</span>元
					</font></span>
				</a> <a class="footer-item mui-col-xs-4"  style="background-color: #C7C7CC; padding: 0px;">
					<button class="mui-btn mui-btn-block mui-btn-outlined" id="continueShop"
						style="color: #000000;">继续购物</button>
				</a> <a class="footer-item mui-col-xs-4"
					style="background-color: #FF5053; padding: 0px;">
					<button class="mui-btn mui-btn-danger mui-btn-block" style="color: #FFFFFF;" id="settle">去结算</button>
				</a>
			</div>
		</footer>
		<div class="mui-content" id="goods">
		</div>
	</body>
<script src="../../../mui/js/mui.min.js"></script>
<script src="../../../js/common.js"></script>
<script src="../../../js/ajax-common.js"></script>	
<script src="../../../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	mui.ready(function(){
			var shopCartId = window.localStorage.shopCartId;
			var act=window.localStorage.act;
			if(act=="c"){
				url="cart/delete/"+shopCartId;
				window.localStorage.act="b";
			}else{
				var url = "cart/list";
			}
			window.localStorage.addShop="b";
			var success = function(response) {
				var shopCarts = response.shopCarts;
				window.localStorage.num = shopCarts.length;
				/*显示购物车商品列表*/
				setShopCarts(shopCarts);
			};
			ajaxFunc(url, success);
			
	});
	function setShopCarts(shopCarts){
		var shopcartHtml="";
		if(shopCarts){
			for(key in shopCarts){
			shopcartHtml=shopcartHtml+setShopCart(shopCarts[key]);
			}
		}
		$("#goods").html(shopcartHtml);
	}
	function setShopCart(shopCart){
		shopCartUl='<ul class="mui-table-view mui-grid-view"><li class="mui-table-view-cell mui-media mui-col-xs-4"><img class="mui-media-object mui-pull-left" src="'+
		imageCxt+shopCart.goods.goodsImages[0].imageUrl+'"></li><li class="mui-table-view-cell mui-media mui-col-xs-5"><p class="mui-ellipsis">'+shopCart.goods.name+'</p> <font>优惠价：￥<font class="price" id="price_'+
		shopCart.id+'">'+shopCart.goods.salePrice+'</font>元</font><br><div class="mui-numbox" data-numbox-min="1"><button id="btn_'+shopCart.id+'" class="mui-btn mui-btn-numbox-minus" type="button">-</button><input id="num_'+
		shopCart.id+'" class="mui-input-numbox" type="number" value="'+
		shopCart.quantity+'" /><button id="plus_'+shopCart.id+'" class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></li><li class="mui-table-view-cell mui-media mui-col-xs-3"><div class="mui-input-row mui-checkbox"><input type="checkbox" name="checkbox" id="'+
		shopCart.id+'" value="'+shopCart.goods.id+'"></div> <span id="delectBtn_'+shopCart.id+'" class="mui-icon mui-icon-trash"></span></li></ul>';
		return shopCartUl
	}
	//全选
	var checkbox=document.getElementsByName("checkbox");
	document.getElementById("checkAll").addEventListener("tap",function(){
		var num=0;
		for(i = 0; i < checkbox.length; i++) {
			if(checkbox[i].checked){
				num+=1;
			}
		}
		if(num!=checkbox.length){
			for(i = 0; i < checkbox.length; i++) {
				checkbox[i].checked=true;
			}
		}else{
			for(i = 0; i < checkbox.length; i++) {
				checkbox[i].checked=false;
			}
		}
		check();
	});
	//单选
	mui(".mui-content").on('change','.mui-checkbox',function(){
		check();
	});
	//遍历所有的复选框，得到总金额
	function check(){
		//总计金额
		var totalAmount = 0.0;
		totalAmount.toFixed(2);
		for(i=0;i<checkbox.length;i++){
			if(checkbox[i].checked){
				var id=checkbox[i].id;
				var num=$("#num_"+id).val();
				var price=$("#price_"+id).html();
				totalAmount=totalAmount+parseFloat(num)*parseFloat(price);
			}
		}
		$("#total").html(totalAmount);
	}
	//商品数量变化
	mui(".mui-content").on('change','.mui-input-numbox',function(){
		var shopCartId=this.getAttribute("id").split("_")[1];
		var num=$("#num_"+shopCartId).val();
		changGoodsNum(shopCartId,num);
	});
	//数量减一/加一
	mui(".mui-content").on('tap','.mui-btn',function(){
		var id=this.getAttribute("id");
		var shopCartId=id.split("_")[1];
		var ele=$("#num_"+shopCartId);
		if(id.split("_")[0]=="btn"){
			if(ele.val()==1){
				var btnArray = ['是', '否'];
				mui.confirm('确认要移除该物品吗？', '', btnArray, function(e) {
					if (e.index == 0) {
						//移除该商品
						deleteShopCart(shopCartId);
					} 
				});
			}else{
				ele.val(parseInt(ele.val())-1);
				changGoodsNum(shopCartId,ele.val());
			}
		}else{
			ele.val(parseInt(ele.val())+1);
			changGoodsNum(shopCartId,ele.val());
			}
	});
	//
	function changGoodsNum(shopCartId,num){
		check();
		var url = "cart/add/s"+"/"+num+"/"+shopCartId;
		ajaxFunc(url);
	}
	//点击清空标志
	document.getElementById("deleteAll").addEventListener('tap',function(){
		var btnArray = ['是', '否'];
		mui.confirm('确认要清空购物车吗？', '', btnArray, function(e) {
			if (e.index == 0) {
				//移除该商品
				var shopCartId=0;
				deleteShopCart(shopCartId);
			} 
		});
	});
	//点击删除标签
	mui(".mui-content").on("tap",".mui-icon-trash",function(){
		var shopCartId=this.getAttribute("id").split("_")[1];
		var btnArray = ['是', '否'];
		mui.confirm('确认要移除该物品吗？', '', btnArray, function(e) {
			if (e.index == 0) {
				//移除该商品
				deleteShopCart(shopCartId);
			} 
		});
	});
	function deleteShopCart(shopCartId){
		mui.openWindow({
				id:'cart',
				url:'../cart/cart.html',
			});
		window.localStorage.shopCartId = shopCartId;
		window.localStorage.act = "c"; 
	}
	/* 购物车订单下单 */
	document.getElementById("settle").addEventListener('tap',function(){
		var num = window.localStorage.num;
		if(num == 0){
			mui.alert('请前往购物','购物车为空');
		}else{
			var value = ""; 
			$('input[name="checkbox"]:checked').each(function(){ 
				value = value + $(this).val() + ','; 
			}); 
			if(value == ""){
				mui.alert('没有选中商品');
			}else{
				mui.openWindow({
				id:'order',
				url:'../order/order.html',
				});
				window.localStorage.selectGoodsId = value;
			}
		}
	});
	//继续购物，回到主页
	document.getElementById("continueShop").addEventListener('tap',function(){
		console.log("继续购物");
		mui.openWindow({
				id:'index',
				url:'../index.html'
			});
	});
	
	
</script>
</html>
